<template>

    <el-table
            highlight-current-row
            v-loading="loading"
            :data="clients.filter(data => !search || data.clname.toLowerCase().includes(search.toLowerCase()) || data.clid==search)"
            stripe
            style="width: 100%">
        <el-table-column
                prop="clid"
                label="会员编号"
                width="140">
        </el-table-column>
        <el-table-column
                prop="clname"
                label="姓名">
        </el-table-column>
        <el-table-column
                prop="clphone"
                label="电话">
        </el-table-column>
        <el-table-column
                prop="clidcard"
                label="身份证号">
        </el-table-column>
        <el-table-column
                prop="cldate"
                sortable
                label="会员注册时间">
        </el-table-column>

        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        prefix-icon="el-icon-search"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        type="info"
                        @click="dialog = true">新增</el-button>
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-popconfirm
                        confirmButtonText='好的'
                        cancelButtonText='不用了'
                        icon="el-icon-info"
                        iconColor="red"
                        title="确定删除该会员信息吗？"
                        @onConfirm="handleDelete(scope.$index, scope.row)"
                >
                    <el-button
                            style="margin-left: 10px;"
                            slot="reference"
                            size="mini"
                            type="danger"
                            @click="">删除</el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
        <!--新增会员信息面板-->
        <el-drawer
                :append-to-body="true"
                :before-close="handleClose"
                :visible.sync="dialog"
                custom-class="demo-drawer"
                ref="drawer">
            <!-- :append-to-body="true" 解决全部黑屏，无法关闭抽屉的情况 -->
            <div class="demo-drawer__content" style="margin-top: -40px">
                <h3 style="text-align: center">添加会员信息</h3>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" size="medium">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="ruleForm.name" style="width:auto;"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input type="phone" maxlength="11"  v-model.number="ruleForm.phone" autocomplete="off" style="width:auto;"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="idCard">
                        <el-input v-model="ruleForm.idCard" style="width:auto;" maxlength="18"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="Submit" :loading="loading">{{ loading ? '提交中 ...' : '创建会员' }}</el-button>
                        <el-button @click="cancelForm">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
        <EditVip
                :dataVip="dialogVip"
                :append-to-body="true">
        </EditVip>
    </el-table>
</template>

<script>
    import EditVip from '../components/EditVip.vue'
    export default {
        inject:['reload'],
        name: "VipList",
        components:{EditVip},
        data() {
            return {
                clients: [],
                loading:false,
                search:'',
                dialog: false,
                dialogVip:{},//修改面板的参数
                ruleForm: {
                    name: '',
                    phone: '',
                    idCard: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入乘客姓名', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入电话',trigger: 'blur'},
                        { type: 'number', message: '电话必须为数字值', trigger: 'blur'},
                    ],
                    idCard: [
                        { required: true, message: '请输入身份证号码',trigger: 'blur'},
                    ],

                },
                formLabelWidth: '80px',
                timer: null,
            }
        },
        methods:{
            handleEdit(index, row) {
                this.$store.commit('setDialog',true);
                this.dialogVip=row;
                /* alert(JSON.stringify(this.dialogVip));*/
            },
            handleDelete(index, row) {
                //删除
                //alert("确定删除"+row.orid);
                let id=new URLSearchParams();
                id.append("id",row.clid);
                setTimeout(() => {
                    this.axios.post("/client/delete",id)
                        .then(res=>{
                            if (res.data==""){
                                this.$message({
                                    message: "权限不足,请联系高级管理员",
                                    type: 'error'
                                });
                            }else{
                                this.$message({
                                    message: res.data,
                                    type: 'success'
                                });
                            }
                            //重新渲染（CSDN上的快速刷新页面）
                            this.reload();
                        });
                    this.loading = false;
                }, 600);
            },
            handleClose(done) {
                done();
                //点击抽屉以外，直接回到列表页面
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            cancelForm() {
                //点击取消按钮
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            Submit(done) {
                //点击提交按钮
                if (this.loading) {
                    return;
                }
                //验证表单
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        console.log('表单验证通过！');
                        this.$confirm('确定要提交表单吗？')
                            .then(_ => {
                                //提交表单
                                //alert("提交表单");
                                this.loading = true;
                                this.timer = setTimeout(() => {
                                    let client = new URLSearchParams();
                                    client.append('clname', this.ruleForm.name);
                                    client.append('clphone', this.ruleForm.phone);
                                    client.append('clidcard',this.ruleForm.idCard);
                                    client.append('registertime',new Date());

                                    // 动画关闭需要一定的时间
                                    setTimeout(() => {
                                        this.axios.post("/client/create",client)
                                            .then(res=>{
                                                if(res.data==0){
                                                    this.$message({
                                                        message: "会员已经存在",
                                                        type: 'warning'
                                                    });
                                                }else {
                                                    this.$message({
                                                        message: "会员添加成功",
                                                        type: 'success'
                                                    });
                                                }

                                                //重新渲染（CSDN上的快速刷新页面）
                                                this.reload();
                                            });
                                        this.loading = false;
                                    }, 400);
                                }, 500)
                            })
                            .catch(_ => {
                                //不提交表单，回到列表页面
                                this.loading = false;
                                this.dialog = false;
                                clearTimeout(this.timer);
                            });
                    } else {
                        //表单验证失败
                        //console.log('error submit!!');
                        this.$message.error('请正确填写会员信息');
                        return false;
                    }
                });

            },
        },
        created(){
            let _this=this;
            _this.loading=true;
            this.axios.get("/client/queryAll")
                .then(res=>{
                    //console.log(res.data[0]);
                    //this.tableData=res.data;
                    let clients=[];
                    for (let i = 0; i < res.data.length; i++) {
                        clients[i]={
                            clid: res.data[i].clid,
                            clphone: res.data[i].clphone,
                            cldate: res.data[i].registertime,
                            clname: res.data[i].clname,
                            clidcard: res.data[i].clidcard,
                            clsal: res.data[i].sal
                        };
                    }
                    this.clients=clients;
                    _this.loading=false;
                })
        }
    }
</script>

<style scoped>

</style>
